<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body{background-color:#98d0f8; color: #fff; text-align:center; font-size:12px;}
            body>div{margin-top:30px;}
            body>div>ul{padding:0; margin:0 auto;overflow: hidden;width: 620px;}
            body>div>ul>li{width:120px; list-style:none; border-left:dotted 1px; float:left;}
            body>div>ul>li:last-child{border-right: dotted 1px;}
    
		</style>
		<script src="../课件/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				$('#search').click(function(){
					var city = $('#city').val().trim()
					
					$.get('http://wthrcdn.etouch.cn/weather_mini?city='+city,function(data,textStatus,jqXHR){
						console.log(data);
						data = JSON.parse(data);
						var ul = $('<ul></ul>');
						for(var i = 0; i < data.data.forecast.length;i++){
							var currDate = data.data.forecast[i];
							var imgIndex = 1;
							switch(currDate.type){
								case '多云':
	                                imgIndex = 5;
	                                break;
	                            case '雷阵雨':
	                                imgIndex = 16;
	                                break;
	                            case '阵雨':
	                                imgIndex = 8;
	                                break;
							}
							var li =$('<li></li>');
							li.html( li.html() + "<h4>" + currDate.date + "</h4>" );
							li.html( li.html() + "<img src='img/" + imgIndex + ".png' />" );
							li.html( li.html() + "<p>" + currDate.type + "</p>" );
							li.html( li.html() + "<p>" + currDate.high.replace('高温', '') + " - " + currDate.low.replace('低温', '') + "</p>" );
							li.html( li.html() + "<p>" + currDate.fengli + "</p>" );
							li.html( li.html() + "<p>" + currDate.fengxiang + "</p>");
	                        ul.append(li);
						}
						$('#container').html('');
                        $('#container').append(ul);
					})
				})
					
			})
		</script>
	</head>
	<body>
		<input type="text" name="" id="city" value="广州" />
		<input type="button" name="" id="search" value="查询" />
		<div id="container">
			
		</div>
	</body>
</html>
